<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>专注助手 - 允许的域名</title>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  
  <!-- 纯CSS样式 -->
  <style>
    /* 基础样式 */
    body {
      font-family: 'Inter', system-ui, sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f9fafb;
      color: #374151;
    }
    
    /* 容器 - 设置最小宽度 */
    .container {
      min-width: 480px;
      max-width: 800px;
      margin: 0 auto;
      padding: 2rem 1rem;
    }
    
    /* 标题区域 */
    .header {
      margin-bottom: 2rem;
    }
    
    .header-title {
      display: flex;
      align-items: center;
      margin-bottom: 0.5rem;
    }
    
    .header-icon {
      background-color: #4F46E5;
      color: white;
      padding: 0.75rem;
      border-radius: 0.5rem;
      margin-right: 0.75rem;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    }
    
    .header h1 {
      font-size: clamp(1.5rem, 3vw, 2.5rem);
      font-weight: bold;
      margin: 0;
    }
    
    .header p {
      color: #6b7280;
      margin: 0;
    }
    
    /* 卡片 */
    .card {
      background-color: white;
      border-radius: 0.75rem;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
      margin-bottom: 1.5rem;
      transition: all 0.3s ease;
    }
    
    .card:hover {
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    }
    
    .card-header {
      padding: 1.5rem;
      border-bottom: 1px solid #e5e7eb;
    }
    
    .card-body {
      padding: 1.5rem;
    }
    
    /* 表单元素 */
    .form-group {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
      margin-bottom: 1.5rem;
    }
    
    .form-input {
      flex: 1;
      min-width: 180px; /* 输入框最小宽度 */
      padding: 0.75rem 1rem;
      border: 1px solid #d1d5db;
      border-radius: 0.5rem;
      outline: none;
      transition: all 0.2s ease;
    }
    
    .form-input:focus {
      border-color: #4F46E5;
      box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.3);
    }
    
    /* 按钮 */
    .btn {
      padding: 0.75rem 1.25rem;
      border-radius: 0.5rem;
      cursor: pointer;
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      white-space: nowrap;
    }
    
    .btn-primary {
      background-color: #4F46E5;
      color: white;
      border: none;
      box-shadow: 0 4px 6px -1px rgba(79, 70, 229, 0.2);
    }
    
    .btn-primary:hover {
      background-color: #4338ca;
      transform: translateY(-1px);
      box-shadow: 0 6px 8px -1px rgba(79, 70, 229, 0.3);
    }
    
    .btn-secondary {
      background-color: #e5e7eb;
      color: #374151;
      border: none;
      box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.1);
    }
    
    .btn-secondary:hover {
      background-color: #d1d5db;
      transform: translateY(-1px);
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    }
    
    .btn-danger {
      background-color: #ef4444;
      color: white;
      border: none;
    }
    
    .btn-danger:hover {
      background-color: #dc2626;
    }
    
    .btn-icon {
      margin-right: 0.5rem;
    }
    
    /* 批量添加区域 */
    .batch-container {
      display: none;
      margin-top: 1rem;
      background-color: #f9fafb;
      padding: 1rem;
      border-radius: 0.5rem;
      border: 1px solid #e5e7eb;
    }
    
    .batch-container.active {
      display: block;
    }
    
    .batch-textarea {
      width: 100%;
      min-height: 100px;
      padding: 0.75rem 1rem;
      border: 1px solid #d1d5db;
      border-radius: 0.5rem;
      outline: none;
      resize: vertical;
      transition: all 0.2s ease;
    }
    
    .batch-textarea:focus {
      border-color: #4F46E5;
      box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.3);
    }
    
    .batch-actions {
      display: flex;
      justify-content: flex-end;
      gap: 0.5rem;
      margin-top: 1rem;
    }
    
    /* 域名列表 */
    .domain-list-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 1rem;
    }
    
    .domain-count {
      background-color: #f3f4f6;
      color: #4b5563;
      padding: 0.25rem 0.75rem;
      border-radius: 9999px;
      font-size: 0.875rem;
    }
    
    .domain-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1rem 0;
      border-bottom: 1px solid #e5e7eb;
    }
    
    .domain-item:last-child {
      border-bottom: none;
    }
    
    .domain-info {
      display: flex;
      align-items: center;
    }
    
    .domain-icon {
      color: #9ca3af;
      margin-right: 0.75rem;
    }
    
    .delete-btn {
      padding: 0.5rem;
      border-radius: 50%;
      color: #ef4444;
      transition: all 0.2s ease;
    }
    
    .delete-btn:hover {
      background-color: #fef2f2;
    }
    
    /* 通知 */
    .notification {
      position: fixed;
      top: 1rem;
      right: 1rem;
      padding: 0.75rem 1.25rem;
      border-radius: 0.5rem;
      color: white;
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
      display: flex;
      align-items: center;
      opacity: 0;
      transform: translateX(20px);
      transition: all 0.3s ease;
      z-index: 50;
    }
    
    .notification.show {
      opacity: 1;
      transform: translateX(0);
    }
    
    .notification-success {
      background-color: #10B981;
    }
    
    .notification-error {
      background-color: #EF4444;
    }
    
    .notification-warning {
      background-color: #F59E0B;
    }
    
    .notification-info {
      background-color: #3B82F6;
    }
    
    .notification-icon {
      margin-right: 0.5rem;
    }
    
    /* 自定义滚动条 */
    .custom-scrollbar {
      max-height: 500px;
      overflow-y: auto;
    }
    
    .custom-scrollbar::-webkit-scrollbar {
      width: 6px;
    }
    
    .custom-scrollbar::-webkit-scrollbar-track {
      background: #f1f1f1;
      border-radius: 10px;
    }
    
    .custom-scrollbar::-webkit-scrollbar-thumb {
      background: #c5c5c5;
      border-radius: 10px;
    }
    
    .custom-scrollbar::-webkit-scrollbar-thumb:hover {
      background: #a0a0a0;
    }
  </style>
</head>
<body>
  <div class="container">
    <!-- 头部区域 -->
    <header class="header">
      <div class="header-title">
        <div class="header-icon">
          <i class="fa fa-shield text-xl"></i>
        </div>
        <h1>专注助手</h1>
      </div>
      <p>管理允许访问的网站</p>
    </header>
    
    <!-- 添加域名区域 -->
    <div class="card">
      <div class="card-header">
        <h2 class="flex items-center">
          <i class="fa fa-plus-circle text-primary mr-2"></i> 添加允许的域名
        </h2>
      </div>
      <div class="card-body">
        <div class="form-group">
          <input 
            type="text" 
            id="domain-input" 
            placeholder="例如: example.com 或 https://example.com" 
            class="form-input"
            aria-label="输入域名"
          >
          <div class="flex flex-wrap gap-2">
            <button id="add-domain-btn" class="btn btn-primary">
              <i class="fa fa-plus btn-icon"></i> 添加
            </button>
            <!-- TODO <button id="batch-add-btn" class="btn btn-secondary">
              <i class="fa fa-list-ul btn-icon"></i> 批量添加
            </button> -->
          </div>
        </div>
        
        <!-- TODO批量添加区域 (默认隐藏) -->
        <!-- <div id="batch-add-container" class="batch-container">
          <h3 class="font-medium mb-2 flex items-center">
            <i class="fa fa-list text-primary mr-2"></i> 批量添加域名
          </h3>
          <p class="text-sm text-gray-500 mb-3">每行输入一个域名，可以是域名或完整URL</p>
          <textarea 
            id="batch-domains" 
            rows="5" 
            class="batch-textarea"
            placeholder="例如:
            example.com
            https://another-site.com/page
            third-site.net"
          ></textarea>
          <div class="batch-actions">
            <button id="batch-cancel-btn" class="btn btn-secondary">
              <i class="fa fa-times mr-1"></i> 取消
            </button>
            <button id="batch-submit-btn" class="btn btn-primary">
              <i class="fa fa-check mr-1"></i> 提交
            </button>
          </div>
        </div> -->
      </div>
    </div>
    
    <!-- 已允许的域名列表 -->
    <div class="card">
      <div class="card-header">
        <div class="domain-list-header">
          <h2 class="flex items-center">
            <i class="fa fa-globe text-primary mr-2"></i> 已允许的域名
          </h2>
          <span id="domain-count" class="domain-count">0 个域名</span>
        </div>
      </div>
      <div class="card-body">
        <ul id="domain-list" class="custom-scrollbar">
          <!-- 域名列表将通过JavaScript动态加载 -->
          <li class="domain-item text-center text-gray-500 italic">
            暂无允许的域名
          </li>
        </ul>
      </div>
    </div>
  </div>

  <script src="options.js"></script>
</body>
</html>